<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网</title>
  <!-- 1. 引进公共的css -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 2. 引进主页的css -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 3. 引进字体图标 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <!-- 4. 引进 jQuery -->
  <script src="./jquery/jquery-1.12.4.js"></script>
  <!-- 5. 引进插件 css 文件 -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.css">
  <!-- 6. 引进插件 js 文件 -->
  <script src="./swiper/swiper-bundle.js"></script>
  <!-- 7. 引进网站图标，显示在浏览器顶部的选项卡 -->
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
  <!-- 模块1：顶部导航 -->
  <div class="top-nav">
    <!-- 版心 -->
    <div class="container">
      <ul>
        <li>
          <!-- iconfont 是字体图标，素材中复制图标结构 -->
          <i class="iconfont icon-header-linkgroup"></i>
          <a href="#">集团网站</a>
          <i class="iconfont icon-arrow-down"></i>
        </li>
        <li>
          <i class="iconfont icon-header-language"></i>
          <a href="#">选择区域/语言</a>
          <i class="iconfont icon-arrow-down"></i>
        </li>
        <li>
          <i class="iconfont icon-header-login-new"></i>
          <a href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 模块2：主体导航 -->
  <div class="navbar">
    <div class="container">
      <!-- 左边 -->
      <a href="#" class="logo">
        <img src="./images/huawei_logo.png" alt="">
      </a>
      <!-- 中间 -->
      <ul>
        <li><a href="#">个人及家庭产品</a></li>
        <li><a href="#">商用产品及方案</a></li>
        <li><a href="#">服务支持</a></li>
        <li><a href="#">合作伙伴与开发者</a></li>
        <li><a href="#">关于华为</a></li>
      </ul>
      <!-- 右边 -->
      <div class="right">
        <a class="buy" href="#">
          <i class="iconfont icon-bags"></i>
          <span>在线购买</span>
          <i class="iconfont icon-arrow-down"></i>
        </a>
        <a href="#">
          <i class="iconfont icon-search"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- 模块3：轮播图 -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/banner01.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/banner02.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="./images/banner03.jpg" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <!-- 模块4：推荐产品 -->
  <div class="goods">
    <h2>推荐信息</h2>
    <!-- 楼层1 -->
    <div class="goods-floor">
      <a href="#"><img class="width01" src="./images/goods_01.jpg" alt=""></a>
      <a href="#"><img class="width02" src="./images/goods_02.jpg" alt=""></a>
    </div>
    <!-- 楼层2 -->
    <div class="goods-floor">
      <a href="#"><img class="width02" src="./images/goods_03.jpg" alt=""></a>
      <a href="#"><img class="width01" src="./images/goods_04.jpg" alt=""></a>
    </div>
    <!-- 楼层3 -->
    <div class="goods-floor">
      <a href="#"><img class="width02" src="./images/goods_05.jpg" alt=""></a>
      <a href="#"><img class="width02" src="./images/goods_06.jpg" alt=""></a>
      <a href="#"><img class="width02" src="./images/goods_07.jpg" alt=""></a>
    </div>
  </div>


  <!-- 模块5：返回顶部 -->
  <div class="top">
    <i class="iconfont icon-arrow-up"></i>
  </div>

  <script>
    // JS脚本特效01：轮播图效果
    let mySwiper = new Swiper('.swiper', {
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

    // JS脚本特效02：浏览器滚动显示返回顶部
    window.addEventListener('scroll', function () {
      // 获取 body 滚动出去的边界值
      let rect = document.body.getBoundingClientRect()
      // 如果滚动到一定距离，修改透明度显示，否则隐藏
      if (rect.top <= -200) {
        $('.top').css({ 'opacity': '1' })  // 显示
      } else {
        $('.top').css({ 'opacity': '0' })  // 隐藏
      }
    })

    // JS脚本特效03：点击平滑地返回顶部
    $('.top').on('click', function () {
      // alert('ok')
      // 以平滑方式返回顶部
      window.scrollTo({ top: 0, behavior: "smooth" })
    })
  </script>
</body>

</html>